<!--  -->
<template>
  <div class="img_box">
    <!-- 标签栏  滚动 -->
    <van-tabs v-model="active">
      <van-tab title="全部">
        <lazy-component>
          <div v-for="img in imgList" :key="img.id" @click="run(img.id)" class="imgBox">
            <img class="imgw" v-lazy="img.img_url">
            <div class="content">
              <p>{{img.title}}</p>
              <p>{{img.zhaiyao}}</p>
            </div>
          </div>
        </lazy-component>
      </van-tab>
      <van-tab v-for="item in imgTaplist" :title="item.title" :key="item.id" :name="item.id">
        <lazy-component>
          <div v-for="img in imgList" :key="img.id" @click="run(img.id)" class="imgBox">
            <img class="imgw" v-lazy="img.img_url">
            <div class="content">
              <p>{{img.title}}</p>
              <p>{{img.zhaiyao}}</p>
            </div>
          </div>
        </lazy-component>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      imgTaplist: [], //存放图片分类数据
      imgList: [] //存放图片列表数据
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getImgTaplist();
    this.getImglist();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    async getImgTaplist() {
      const { data: res } = await this.$http.get("/api/getimgcategory");
      console.log(res);
      this.imgTaplist = res.message;
    },
    async getImglist() {
      const { data: res } = await this.$http.get(
        `/api/getimages/${this.active}`
      );
      this.imgList = res.message;
    },
    run(id) {
      console.log(id);
      this.$router.push({ path: `/photo/Info/${id}` });
    }
  }
};
</script>
<style scoped>
.imgBox {
  position: relative;
}
.imgBox .content {
  width: 94%;
  height: 75px;
  position: absolute;
  padding: 0 10px;
  left: 0;
  bottom: 10px;
  border-radius: 0 0 5px 5px;
  background: rgba(0, 0, 0, 0.4);
}
.imgBox .content p {
  margin: 5px 0;
  font-size: 12px;
  color: #fff;
  text-align: left;
}
.van-tab__pane {
  height: 100%;
  width: 95%;
  text-align: center;
  margin: 10px auto;
}
.van-tabs__content {
  display: block;
  margin: 0 10px;
}
.imgw {
  border-radius: 5px;
  height: 100%;
  width: 100%;
  margin-bottom: 10px;
}
.lazy-component {
  position: relative;
}
/* @import url(); 引入css类 */
</style>